<template>
  <div class="process-diagram">
    <div class="diagram-header">
      <h3>流程图</h3>
      <div class="diagram-actions">
        <el-button @click="refreshDiagram">
          <Icon icon="ant-design:reload-outlined" />
          刷新
        </el-button>
        <el-button @click="zoomIn">
          <Icon icon="ant-design:zoom-in-outlined" />
          放大
        </el-button>
        <el-button @click="zoomOut">
          <Icon icon="ant-design:zoom-out-outlined" />
          缩小
        </el-button>
        <el-button @click="fitView">
          <Icon icon="ant-design:fullscreen-outlined" />
          适应窗口
        </el-button>
        <el-button @click="exportDiagram">
          <Icon icon="ant-design:download-outlined" />
          导出图片
        </el-button>
        <el-dropdown @command="handleExportCommand" trigger="click">
          <el-button>
            <Icon icon="ant-design:export-outlined" />
            导出选项
            <Icon icon="ant-design:down-outlined" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="png">导出为PNG</el-dropdown-item>
              <el-dropdown-item command="jpg">导出为JPG</el-dropdown-item>
              <el-dropdown-item command="svg">导出为SVG/JSON</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <div class="diagram-content">
      <div v-if="graphData && graphData.nodes && graphData.nodes.length > 0" class="flow-diagram">
        <!-- 使用流程设计器包装组件 -->
        <div class="process-diagram-container">
          <ProcessDesignerWrapper
            ref="designerWrapperRef"
            :process-data="processData"
            :graph-data="graphData"
            :node-status-list="nodeStatusList"
            :gateway-conditions="gatewayConditions"
            :readonly="true"
            @refresh="handleRefresh"
            @node-click="onNodeClick"
          />
        </div>
      </div>
      <div v-else class="no-diagram">
        <Icon icon="ant-design:deployment-unit-outlined" />
        <p>暂无流程图数据</p>
      </div>
    </div>
    
    <!-- 节点详情弹窗 -->
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Icon from '@/components/Icon/Icon.vue'
import ProcessDesignerWrapper from '@/views/workflow/process/components/ProcessDesignerWrapper.vue'

// 引入统一的夜间模式样式
import '../styles/dark-theme.css'

const props = defineProps({
  processData: {
    type: Object,
    default: null
  },
  graphData: {
    type: Object,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  },
  nodeStatusList: {
    type: Array,
    default: () => []
  },
  gatewayConditions: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['refresh', 'node-click'])

// 流程设计器包装组件引用
const designerWrapperRef = ref(null)

// 组件挂载后触发resize事件
onMounted(() => {
  // 触发resize事件以确保流程图正确渲染
  nextTick(() => {
    window.dispatchEvent(new Event('resize'))
  })
})

// 刷新流程图
const refreshDiagram = () => {
  emit('refresh')
}

// 放大
const zoomIn = () => {
  if (designerWrapperRef.value) {
    designerWrapperRef.value.zoomIn()
  }
}

// 缩小
const zoomOut = () => {
  if (designerWrapperRef.value) {
    designerWrapperRef.value.zoomOut()
  }
}

// 适应窗口
const fitView = () => {
  if (designerWrapperRef.value) {
    designerWrapperRef.value.fitView()
  }
}

// 导出图片
const exportDiagram = async () => {
  if (designerWrapperRef.value) {
    try {
      await designerWrapperRef.value.exportDiagram()
    } catch (error) {
      console.error('导出图片失败:', error)
      ElMessage.error('导出图片失败')
    }
  }
}

// 处理导出命令
const handleExportCommand = async (command) => {
  if (designerWrapperRef.value) {
    try {
      switch (command) {
        case 'png':
          await designerWrapperRef.value.exportAsPNG()
          break
        case 'jpg':
          await designerWrapperRef.value.exportAsJPG()
          break
        case 'svg':
          await designerWrapperRef.value.exportAsSVG()
          break
        default:
          ElMessage.warning('未知的导出格式')
      }
    } catch (error) {
      console.error('导出失败:', error)
      ElMessage.error('导出失败')
    }
  }
}

// 处理刷新
const handleRefresh = () => {
  emit('refresh')
}

// 处理节点点击
const onNodeClick = (nodeData) => {
  emit('node-click', nodeData)
}

// 暴露方法给父组件
defineExpose({
  refreshDiagram,
  zoomIn,
  zoomOut,
  fitView,
  exportDiagram
})
</script>

<style scoped>
.process-diagram {
  padding: 20px 0;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 350px) !important;
}

.diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.diagram-header h3 {
  margin: 0;
  color: #1a1a1a;
}

.diagram-actions {
  display: flex;
  gap: 8px;
}

.diagram-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: calc(100vh - 400px) !important;
  position: relative;
}

.flow-diagram {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: calc(100vh - 400px) !important;
}

.process-diagram-container {
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  min-height: calc(100vh - 450px) !important;
}

/* 确保Vue Flow容器有正确的尺寸 */
:deep(.vue-flow) {
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  min-height: calc(100vh - 500px) !important;
}

:deep(.vue-flow__viewport) {
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 500px) !important;
}

:deep(.vue-flow__container) {
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 500px) !important;
}

/* 确保背景网格完整覆盖 */
:deep(.vue-flow__background) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.vue-flow__background-pattern) {
  width: 100% !important;
  height: 100% !important;
}

.no-diagram {
  text-align: center;
  color: #999;
  padding: 40px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  height: 100%; /* 使用100%高度适应容器 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.no-diagram :deep(svg) {
  font-size: 48px;
  margin-bottom: 16px;
}

.node-detail {
  padding: 10px 0;
}

.assignee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.assignee-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}
</style> 